<template>
  <div class="submission-list">
    <el-card slot="header">
      <div class="submission-list-header">
        <div class="submission-list-header-text">用户ID</div>
        <el-input class="submission-list-header-el-input" v-model="userId"></el-input>
        <div class="submission-list-header-text">题目ID</div>
        <el-input class="submission-list-header-el-input" v-model="problemId"></el-input>
        <div class='submission-list-header-el-dropdown'>
          <el-dropdown @command="handleStatusCommand">
            <span class="el-dropdown-link">
              {{ status >= 0 ? STATUS_HASH[status] : 'All Status' }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in STATUS_HASH" :key="item" :command="index">
                {{ item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="submission-list-header-el-dropdown">
          <el-dropdown @command="handleLanguageCommand">
            <span class="el-dropdown-link">
              {{ language >= 0 ? LANGUAGE_HASH[language] : 'All Languages' }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in LANGUAGE_HASH" :key="item" :command="index">
                {{ item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-button class="submission-list-header-button" @click="refresh">更新</el-button>
      </div>

      <submission-list-body :submission-list="model.submissionList"/>
      <div class="submission-list-pagination">
        <el-pagination
            layout="prev, pager, next"
            :total="model.totalCount"
            :page-size="50"
            :current-page="currentPage"
            @current-change="currentPageChanged"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

import {getSubmissionList} from "@/network/submission";
import SubmissionListBody from "@/components/content/submissionlist/SubmissionListBody";

import {JUDGE_OPTIONS} from "@/utils/constants";

export default {
  name: "SubmissionList",
  components: {SubmissionListBody},
  props: {
    initialUserId: {
      type: String,
      default: ''
    },
    initialProblemId: {
      type: String,
      default: ''
    },
    initialStatus: {
      type: String,
      default: '-1'
    },
    initialLanguage: {
      type: String,
      default: '-1'
    },
    initialContestId: {
      type: String,
      default: ''
    },
    initialPage: {
      type: Number,
      default: 1,
    },
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      model: {
        submissionList: [],
        totalCount: 0
      },
      userId: this.initialUserId,
      problemId: this.initialProblemId,
      status: this.initialStatus,
      language: this.initialLanguage,
      contestId: this.initialContestId,
      currentPage: this.initialPage,
      STATUS_HASH: JUDGE_OPTIONS.STATUS_HASH,
      LANGUAGE_HASH: JUDGE_OPTIONS.LANGUAGE_HASH,
    }
  },
  methods: {
    init() {
      this.getSubmissionData();
    },
    getSubmissionData() {
      getSubmissionList(this.userId, this.problemId,
          this.contestId, this.status, this.language, this.currentPage)
          .then(res => {
            this.model = res.data;
          })
    },
    currentPageChanged(value) {
      this.currentPage = value;
      this.getSubmissionData();
    },
    handleStatusCommand(value) {
      this.status = value;
    },
    handleLanguageCommand(value) {
      this.language = value;
    },
    refresh() {
      this.currentPage = 1;
      this.getSubmissionData();
    }
  },
}
</script>

<style lang="less" scoped>
.submission-list {
  &-header {
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    margin-bottom: 16px;
    *{
      margin-left: 4px;
      margin-right: 4px;
    }

    &-el-input {
      max-width: 200px;
    }

    &-text {
      text-align: center;
      height: 100%;
      display: inline-block;
    }

    &-el-dropdown {
      font-size: 18px;
    }

    &-button {
    }

  }

  &-pagination {
    margin-top: 16px;
  }
}


.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 16px;
}


</style>